<template>
  <div class="demo-date-picker">
    <div class="block">
      <el-date-picker v-model="value2" type="daterange" unlink-panels range-separator="-" start-placeholder="请选择日期"
        end-placeholder="请选择日期" :shortcuts="shortcuts" :size="size" @change="pickerData" />
    </div>

  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import sj from "@/utils/yzy/sj"
const size = ref<'default' | 'large' | 'small'>('small')
const value2 = ref('')
let mounths = ref<number>(0)
let startyarn = ref<any>(0)
let endyarn = ref<any>(0)
let startmounth = ref<any>(0)
let endmounth = ref<any>(0)
import useNumStore from "@/store/mmm/useNumStore"
const store = useNumStore()
const shortcuts = [
  {
    text: '今日',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setHours(0, 0, 0, 0)
      return [start, end]
    },
  },
  {
    text: '本周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - start.getDay())
      start.setHours(0, 0, 0, 0)
      return [start, end]
    },
  },
  {
    text: '本月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(1)
      start.setHours(0, 0, 0, 0)
      return [start, end]
    },
  },
  {
    text: '本季度',
    value: () => {
      const end = new Date()
      const start = new Date()
      const month = start.getMonth()
      start.setMonth(Math.floor(month / 3) * 3)
      start.setDate(1)
      start.setHours(0, 0, 0, 0)
      return [start, end]
    },
  },
  {
    text: '本年',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(0)
      start.setDate(1)
      start.setHours(0, 0, 0, 0)
      return [start, end]
    },
  },
  {
    text: '去年',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setFullYear(start.getFullYear() - 1)
      start.setMonth(0)
      start.setDate(1)
      start.setHours(0, 0, 0, 0)
      end.setFullYear(end.getFullYear() - 1)
      end.setMonth(11)
      end.setDate(31)
      end.setHours(23, 59, 59, 999)
      return [start, end]
    },
  },
]
const pickerData = (val: any) => {
  console.log('ttt', sj(val[0]), "bb", sj(val[1]));

  startyarn.value = sj(val[0]).slice(0, 4)
  endyarn.value = sj(val[1]).slice(0, 4)
  startmounth.value = sj(val[0]).slice(5, 7)
  endmounth.value = sj(val[1]).slice(5, 7)
  if (endyarn.value - startyarn.value > 0) {
    mounths.value += 12 * (endyarn.value - startyarn.value)
  }
  if (endmounth.value - startmounth.value > 0) {
    mounths.value += (endmounth.value - startmounth.value)
  }
  console.log("mounths.value", mounths.value);
  store.mounthStore = mounths.value
}

</script>

<style lang="scss" scoped>
.demo-date-picker {
  margin-left: 10px;
}
</style>